<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  lineData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    const date = new Date();
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const legendNum = props?.lineData?.legendData?.length
    const seriesNum = props?.lineData?.seriesData?.length
    const markAreaNum = props?.lineData?.markAreaData?.length
    let tempSeriesData = [
      {
        data: props?.lineData?.seriesData[legendNum - 1],
        type: 'line',
        name: '未干预',
        smooth: true,
        showSymbol: true,
        itemStyle: {
          color: '#5ABE52'
        },
        markArea: {
          silent: true,
          itemStyle: {
            color: '#00FDFF',
            opacity: 0.4,
          },
          label: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
          },
          data: [props?.lineData?.markAreaData[markAreaNum - 1]]
        }
      }
    ]
    if (legendNum === 2) {
      tempSeriesData.unshift(
          {
            data: props?.lineData?.seriesData[0],
            type: 'line',
            name: '干预',
            smooth: true,
            showSymbol: true,
            itemStyle: {
              color: '#0E81FF'
            },
            markArea: {
              silent: true,
              itemStyle: {
                color: '#F45454',
                opacity: 0.4,
              },
              label: {
                color: 'white',
                fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
              },
              data: [...props?.lineData?.markAreaData?.filter((x, i) => i !== props?.lineData?.markAreaData?.length - 1)]
            }
          }
      )
    }
    myChart.value = echarts.init(echartDom.value);
    let option = {
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? 0 : 1}%`,
        right: '5%',
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 25 : 20}%`,
        containLabel: true
      },
      legend: {
        x: 'center',
        icon: 'rect',
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        data: props?.lineData?.legendData
      },
      tooltip: {
        formatter: function (params) {
          return (
              '日期：' + params.name + '<br/>' +
              '单价：' + params.data
          )
        }
      },
      xAxis: {
        min: 0,
        type: 'category',
        boundaryGap: false,
        data: props?.lineData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
          showMinLabel: false,
          interval: 0,
          formatter: function (value, index) {
            if (index === 0) return ''
            const tempLabelArray = value.split('-')
            if (index - 1 === 0) {
              return tempLabelArray[0]
            } else {
              const tempLastLabelArray = props?.lineData?.xAxisData[index - 1].split('-')
              if ( tempLabelArray.length === 2 && (Number(tempLabelArray[0]) == Number(tempLastLabelArray[0]) + 1) ) {
                return tempLabelArray[0]
              } else {
                if (tempLabelArray[0] == year && Number(tempLabelArray[1]) >= month + 1) {
                  return value
                } else {
                  return ''
                }
              }
            }
          }
        },
        axisLine: {
          show: false // 不显示坐标轴线
        },
      },
      yAxis: {
        min: 0,
        max: (value) => value.max || 300,
        name: props?.lineData?.yAxisName,
        nameTextStyle: {
          color: "white",
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          fontWeight: 'lighter',
          padding: [0, 0, 0, pxToRem(-20 * props?.dialogData?.fontSizeTimes)]
        },
        textStyle: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes)
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter'
        }
      },
      series: tempSeriesData
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on('legendselectChanged', (params) => {
      event.stopPropagation();
    })
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};


defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h160 {
  height: 160px;
}
.dialog-h160 {
  width: 1120px;
  height: 500px;
}
</style>